* {
    padding: 0;
    margin: 0;
}

article {
    width: 300px;
    height: 300px;
    border: 1px solid silver;
    display: grid;

    /* 第一种写法 */
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);


    /* 第二种写法 */
    grid-template-columns: 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;

    /* 第三种写法 */
    grid-template-rows: 50% 50%;
    grid-template-columns: 25% 25% 25% 25%;

    /* 第四种写法 */
    grid-template-rows: repeat(2, 100px, 50px);
    grid-template-columns: repeat(2, 50px, 100px);

    /* 第五种写法 */
    grid-template-rows: repeat(auto-fill, 100px);
    grid-template-columns: repeat(auto-fill, 100px);


    /* 第六种写法 */
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-columns: 1fr 2fr 1fr;

    /* 第七种写法--最值 */
    grid-template-rows: repeat(2, minmax(50px, 100px));
    grid-template-columns: repeat(4, 1fr);

    /* 区域分组 */
    /* grid-template-rows: 60px 1fr 60px;
    grid-template-columns: 60px 1fr; */
    /* grid-template-areas:"header header"
                        "nav main"
                        "footer footer"; */
    /* grid-template-areas:". ."
                        ". ."
                        "footer footer";  */

    /* 边距 */
    /* row-gap: 10px; */
    /* column-gap: 20px; */
    /* 边距间简写 x y */
    /* gap: 20px 10px; */



    /* 流动 */
    /* grid-auto-flow: column; */
    grid-auto-flow: row dense/*强制填充完整*/;


    /* 对齐 */
    /* 整个栅格相对于整个容器对齐 */
    justify-content: space-evenly;
    align-content: center;
    
    /* 简写 */
    /* place-content:start; */


    /* 单个单元格内容相对于单元格对齐 */
    /* justify-items: center;
    align-items: center; */
    /* 简写 */
    place-items: center;



}


/* 栅格定位填充 */
.child-p {
    background-color: rgb(8, 95, 166);
    background-clip: content-box;
    padding: 5px;

    /* 第一种写法 */
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 4;

    /* 第二种写法 */
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: span 1;
    grid-column-end: span 2;


    /* 第三种写法  简写 */
    grid-row: 1/span 2;
    grid-column: 1/span 3;


    /* 第四种写法  区域写法 */
    grid-area: 2/2/3/4;
}

/* 第五种写法 --区域编组*/
/* footer {
    background-color: red;
    background-clip: content-box;
} */





article  p {
    background-color: aqua;
    width: 30px;
    border: 1px solid rgb(162, 58, 58);
    height: 30px;
    padding: 0;
    margin: 0;
    text-align: center;
}